<template>
	<view class="my_content">
		<!-- 	<view class="un_login" v-if="!isLogin">
			<view>海外学生管理系统</view>
			<view>请登录后使用</view>
			<button class="login_btn" @tap="goLogin">登录</button>
		</view> -->
		<view class="is_login">
			<!-- <view class="login_title">欢迎使用海外学生管理系统</view>
			<view class="user_info">
				<view @tap="goUserInfo">
					<text>个人信息</text>
					<text class="iconfont_icon">&#xe630;</text>
				</view>
				<view @tap="goEditPW">
					<text>修改密码</text>
					<text class="iconfont_icon">&#xe630;</text>
				</view>
			</view>
			<button class="login_btn" @tap="logout">退出</button> -->
			<view class="is_login_up">
				<image class="up_avatar" src="../../static/img/avatar.jpg"></image>
				<view class="up_box">
					<view>{{ userList.name }}</view>
				</view>
			</view>
			<view class="login_info">
				<view class="info_label">Profile</view>
				<view class="info_list">
					<view class="info_item">
						<view class="item_left">
							<image src="../../static/img/loginTypeIcon.png"></image>
							<view>Role</view>
						</view>
						<view class="item_right">
							<view>{{ userList.type }}</view>
						</view>
					</view>
					<view class="info_item" @tap="goUserInfo('userName')">
						<view class="item_left">
							<image src="../../static/img/userNameIcon.png"></image>
							<view>Name</view>
						</view>
						<view class="item_right">
							<view>{{ userList.name }}</view>
						</view>
						<text class="iconfont_icon">&#xe630;</text>
					</view>
					<view class="info_item" @tap="goUserInfo('tel')">
						<view class="item_left">
							<image src="../../static/img/contactIcon.png"></image>
							<view>Mobile</view>
						</view>
						<view class="item_right">
							<view>{{ userList.tel }}</view>
						</view>
						<text class="iconfont_icon">&#xe630;</text>
					</view>
					<view class="info_item" @tap="goUserInfo('email')">
						<view class="item_left">
							<image src="../../static/img/EmailIcon.png"></image>
							<view>Email</view>
						</view>
						<view class="item_right">
							<view>{{ userList.email }}</view>
						</view>
						<text class="iconfont_icon">&#xe630;</text>
					</view>
				</view>
			</view>
			<view class="psw_setting">
				<view class="psw_label">Setting</view>
				<view class="info_item" @tap="goEditPW" style="padding: 0 20px; box-sizing: border-box;">
					<view class="item_left">
						<image src="../../static/img/editPswIcon.png"></image>
						<view>Change Password</view>
					</view>
					<view><text class="iconfont_icon" style="color: #666; font-size: 16px; right: 20px;">&#xe630;</text></view>
				</view>
			</view>
			<view class="logout_btn" @tap="logout">Logout</view>
		</view>
		<bar indexActive="2" :tabList="tabList"></bar>
	</view>
</template>

<script>
import bar from '../../components/tabBar.vue';
import api from '../../api/loginApi.js';
import homeHL from '../../static/img/homeHL.png';
import homeUN from '../../static/img/home.png';
import myHL from '../../static/img/userHL.png';
import myUN from '../../static/img/user.png';
import payHL from '../../static/img/iconPayHL.png';
import payUN from '../../static/img/iconPay.png';
import listHL from '../../static/img/iconListHL.png';
import listUN from '../../static/img/iconList.png';
import otherApi from '../../api/otherApi.js';
import utils from '../../api/utils.js';

export default {
	data() {
		return {
			isLogin: false,
			userList: {},
			tabList: [
				{
					name: 'Home',
					imgPL: homeHL,
					imgUN: homeUN,
					url: '../index/index'
				},
				{},
				{
					name: 'Mine',
					imgPL: myHL,
					imgUN: myUN,
					url: '../my/my'
				}
			],
			payObj: {
				name: 'Payment',
				imgPL: payHL,
				imgUN: payUN,
				url: '../bottomMenu/bottomMenu'
			},
			stuListObj: {
				name: 'Students',
				imgPL: listHL,
				imgUN: listUN,
				url: '../bottomMenu/bottomMenu'
			}
		};
	},
	components: { bar },
	methods: {
		goLogin() {
			uni.redirectTo({
				url: '../login/login'
			});
		},
		goUserInfo(type) {
			uni.navigateTo({
				url: `./userInfo?type=${type}`
			});
		},
		goEditPW() {
			uni.navigateTo({
				url: './editPW'
			});
		},
		async logout() {
			let _this = this;
			uni.showLoading({
				title: 'Please wait...',
				mask: true
			});
			let data = await api.logout('logout');
			if (data.head.status) {
				uni.showToast({
					title: data.body,
					duration: 1000
				});
				setTimeout(() => {
					_this.isLogin = false;
					uni.removeStorage({
						key: 'token',
						success(res) {
							console.log(res, '>>>清除token缓存成功！');
							//////////////////////////
							var tokenStr = '';
							if ('iOS' == plus.os.name) {
								var UserDefaultsClass = plus.ios.importClass('NSUserDefaults');
								var standardUserDefaults = UserDefaultsClass.standardUserDefaults();
								plus.ios.invoke(standardUserDefaults, 'setObject:forKey:', tokenStr, 'token');
								plus.ios.invoke(standardUserDefaults, 'synchronize');
							}
							if (utils.platform == 'android') {
								var main = plus.android.runtimeMainActivity();
								var sp = plus.android.invoke(main, 'getSharedPreferences', 'com.student.preferences', 0);
								var editor = plus.android.invoke(sp, 'edit');
								plus.android.invoke(editor, 'putString', 'token', tokenStr);
								plus.android.invoke(editor, 'commit');
							}
							//////////////////////////
						}
					});
					uni.removeStorage({
						key: 'userInfo',
						success(res) {
							console.log(res, '>>>清除个人信息缓存成功！');
						}
					});

					uni.removeStorage({
						key: 'guardianPhotoPath',
						success(res) {
							console.log(res, '>>>清除监护人头像成功！');
						}
					});

					uni.redirectTo({
						url: '../login/login'
					});
				}, 1200);
			} else {
				uni.showToast({
					title: data.head.msg,
					icon: 'none',
					duration: 1000
				});
			}
			uni.hideLoading();
		}
	},
	onLoad() {},
	async onShow() {
		let _this = this;
		let token = '';
		uni.getStorage({
			key: 'token',
			success: function(res) {
				token = res.data;
				if (!!res.data) {
					_this.isLogin = true;
				} else {
					_this.isLogin = false;
				}
			},
			fail: function(err) {
				console.log(err);
				_this.isLogin = false;
			}
		});

		uni.getStorage({
			key: 'userInfo',
			success(res) {
				if (res.data.userType == '家长') {
					_this.tabList.splice(1, 1, _this.payObj);
					_this.userList = {
						type: res.data.userType,
						name: res.data.userName,
						tel: res.data.parentPhone,
						email: res.data.parentEmail
					};
				} else if (res.data.userType == '监护人') {
					_this.tabList.splice(1, 1, _this.stuListObj);
					_this.userList = {
						type: res.data.userType,
						name: res.data.userName,
						tel: res.data.guardianPhone,
						email: res.data.guardianEmail
					};
				} else if (res.data.userType == '学生') {
					_this.userList = {
						type: res.data.userType,
						name: res.data.userName,
						tel: res.data.stuPhoneHome,
						email: res.data.stuEmail
					};
				}
			}
		});
		if (utils.userType == '学生' && utils.platform == 'android') {
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				async success(res) {
					let Position = {};
					Position = {
						address: (res.address.country + res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum).replace(
							/undefined/g,
							''
						),
						latitude: res.latitude,
						longitude: res.longitude
					};
					let savePosition = await otherApi.savePosition('position/savePosition', Position, token);
				}
			});
			setInterval(async () => {
				let Position = {};
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					async success(res) {
						let Position = {};
						Position = {
							address: (res.address.country + res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum).replace(
								/undefined/g,
								''
							),
							latitude: res.latitude,
							longitude: res.longitude
						};
						await otherApi.savePosition('position/savePosition', Position, token);
					}
				});
			}, 900000);
		}
	}
};
</script>

<style>
.my_content {
	width: 100%;
	position: relative;
	background-color: #f1f1f1;
}

.is_login {
	width: 100%;
}

.is_login_up {
	background-color: #d72729;
	width: 100%;
	height: 100px;
	margin-top: -10px;
	position: relative;
}

.up_box {
	position: absolute;
	width: 90%;
	height: 100px;
	background-color: #fff;
	bottom: -50px;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
}

.up_box view {
	width: 100%;
	margin-top: 15px;
	text-align: center;
}

.up_avatar {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
	border-radius: 50%;
	z-index: 99;
	border: solid 2px #fff;
}

.login_info {
	width: 100%;
	background-color: #fff;
	margin-top: 60px;
}

.info_label,
.psw_label {
	width: 100%;
	height: 40px;
	line-height: 40px;
	color: #666;
	padding: 0 20px;
	box-sizing: border-box;
	font-size: 14px;
	border-bottom: solid 1px #f1f1f1;
}

.info_list {
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.info_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	border-bottom: solid 1px #F6DFE2;
	flex-wrap: wrap;
	position: relative;
}

.info_item:last-child {
	border-bottom: none;
}

.item_left {
	display: flex;
}

.item_left image {
	width: 22px;
	height: 22px;
	margin-right: 5px;
}

.item_left view {
	font-size: 14px;
	color: #666;
}

.item_right {
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 20px;
	box-sizing: border-box;
}

.item_right view {
	color: #666;
	font-size: 14px;
}

.info_item .iconfont_icon {
	color: #666;
	font-size: 16px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: flex;
	align-items: center;
}

.psw_setting {
	margin-top: 10px;
	background-color: #fff;
}

.logout_btn {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background-color: #fff;
	margin-top: 10px;
	text-align: center;
	font-size: 16px;
	color: #d72729;
}

.is_login .login_title {
	width: 100%;
	text-align: center;
	margin-top: 60px;
	font-size: 22px;
	font-weight: bold;
	color: #0599d7;
	letter-spacing: 2px;
}

.un_login {
	width: 100%;
	height: 200px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.un_login view {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}

.user_info {
	width: 100%;
	padding: 75px 55px 10px 55px;
	box-sizing: border-box;
}

.user_info view {
	padding: 20px 0;
	border-bottom: solid 1px #dfdfdf;
	color: #666;
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	box-sizing: border-box;
}

.user_info .iconfont_icon {
	color: #666;
}

.login_btn {
	margin-top: 60px;
	width: 60%;
	height: 50px;
	letter-spacing: 3px;
	color: #666;
}
</style>
